<template>
  <!-- 首页 -->
  <!--  @mousemove="showScrollBar" -->
  <div class="home">
    <!-- 头部 -->
    <mod-header @clickLogin="clickLogin"></mod-header>
    <script-link></script-link>
    <!-- 由于vue会复用相同的组件，所以当同一个组件不同路由发生跳转时将不再执行created、mounted之类的钩子函数 -->
    <!-- 设置key之后会在虚拟DOM阶段比对跳转前后的key值，如果不同则重新销毁重建页面 -->
    <router-view v-if="!my && code == 200" :key="$route.fullPath"></router-view>
    <!-- 以下的router-view用于“我的音乐”和“关注”两个模块 -->
    <router-view v-if="my && code == 200"></router-view>
    <no-resource v-if="code == 404"></no-resource>
    <mod-footer v-show="showFooter"></mod-footer>
    <!-- 登录组件 -->
    <login v-if="showLogin" @closeLogin="closeLogin"></login>
    <collect
      v-if="$store.state.showCollect && $store.state.isLogin"
      :uid="$store.state.profile.userId"
      :sid="$store.state.sid"
    ></collect>
    <share v-if="$store.state.showShare && $store.state.isLogin"></share>
    <theme class="theme-skin"></theme>
    <!-- 回到顶部 -->
    <el-backtop :bottom="100"></el-backtop>
  </div>
</template>

<script>
// 导入头部组件
import ModHeader from "views/index/ModHeader.vue";
// 导入尾部组件
import ModFooter from "views/index/ModFooter.vue";
// 导入推荐模块
import Recommend from "views/recommend/Recommend.vue";
// 导入歌单模块
import PlayLists from "views/playlists/PlayLists.vue";
import Login from "views/login/Login.vue";
import Collect from "components/collect/Collect";
import Share from "components/share/Share";
import Theme from "components/theme/Theme";
import NoResource from "views/notfound/NoResource";

export default {
  name: "Home",
  components: {
    ModHeader,
    ModFooter,
    Recommend,
    PlayLists,
    Login,
    Collect,
    Share,
    Theme,
    NoResource,
    scriptLink: {
      render(createElement) {
        return createElement("script", {
          attrs: {
            type: "text/javascript",
            src: "https://at.alicdn.com/t/font_3193384_b6xncf1rtes.js",
          },
        });
      },
    },
  },
  data() {
    return {
      timeout: null,
      showLogin: false,
      showFooter: true,
      my: false,
      // showCollect: false,
      code: 200,
    };
  },
  mounted() {
    if (
      this.$route.path.slice(0, 3) == "/my" ||
      this.$route.path == "/friend"
    ) {
      this.my = true;
      this.showFooter = false;
    } else {
      this.my = false;
      this.showFooter = true;
    }
    this.checkCode();
  },
  methods: {
    checkCode() {
      let pa = this.$route;
      let path1 = [
        "/song",
        "/mv",
        "/video",
        "/playlist",
        "/album",
        "/artist",
        "/user",
        "/user/event",
        "/user/follows",
        "/user/fans",
        "/my/playlist",
        "/my/edit",
      ];
      let path2 = ["/playlists"];
      let path3 = ["/search"];
      if (path1.includes(pa.path)) {
        if (
          !pa.query.hasOwnProperty("id") ||
          pa.query.id == null ||
          pa.query.id == ""
        ) {
          this.code = 404;
        }
      }
    },
    closeLogin(val) {
      this.showLogin = val;
      if (!this.showLogin) {
        document.documentElement.style.overflowY = "scroll";
      }
    },
    clickLogin(val) {
      this.showLogin = val;
      if (this.showLogin) {
        document.documentElement.style.overflowY = "hidden";
      }
    },
    showScrollBar() {
      document.documentElement.classList.remove("hide");
      // 防抖
      clearTimeout(this.timeout);
      this.timeout = setTimeout(function () {
        document.documentElement.classList.add("hide");
      }, 3000);
    },
  },
};
</script>
<style >
.home {
  position: relative;
}
.theme-skin {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
}
</style>
